<!--
- Author:  LiShibin.
- Date:    2018/9/17.
- File:    reward.
-->
<template>
  <div class="Web_Box">

    <div class="account_tab" style="margin-top: 0px;position:fixed; top:0; left:0; width:100%; background:#fff; z-index:2;">
      <div class="integrat2 f-cb">
        <span style="float: left;width: 33.33%;font-size: 12px">云宝收益: <br>{{memberInfo.earn_hm}}</span>
        <span style="float: left;width: 33.33%;font-size: 12px">云通证收益: <br>{{memberInfo.earn_hg}}</span>
        <span style="float: left;width: 33.33%;font-size: 12px">云积分收益: <br>{{memberInfo.earn_hf}}</span>
        <!--<span style="float: left;width: 25%;font-size: 12px" v-show="">今日总收益: <br>{{memberInfo.earn_hf}}</span>-->
        <!--<router-link :to="{name: 'member-spread'}" class="more">推荐用户购买</router-link>-->
      </div>
    </div>
    <div v-infinite-scroll="loadMore"
      infinite-scroll-disabled="false"
      infinite-scroll-distance="0"
      infinite-scroll-immediate-check="false" style="margin-top: 50px">
      <div class="inter_tab" style="margin-bottom: 5px" v-for="item in historyList.data"><a>
        <table width="100%" border="0">
          <tr>
            <td colspan="2" width="100%">日期：{{item.DAY}}</td>
            <!--<td width="50%">状态：{{history.state | integralStatusTxt}}</td>-->
          </tr>
          <tr style="margin-top: 15px">
            <td colspan="2" width="33.33%" style="float: left;">云宝：{{item.hm}}</td>
            <td colspan="2" width="33.33%" style="float: left;">云通证：{{item.hg}}</td>
            <td colspan="2" width="33.33%" style="float: left;">云积分：{{item.hf}}</td>
            <!--<td width="50%">状态：{{history.state | integralStatusTxt}}</td>-->
          </tr>
          <tr>
            <td colspan="2" width="100%">总收益：{{item.hm + item.hg + item.hf | toFixed(2)}}</td>
            <!--<td width="50%">状态：{{history.state | integralStatusTxt}}</td>-->
          </tr>
        </table>
      </a></div>
    </div>
    <loading-more :allLoaded="historyList.allLoaded" :show="historyList.data.length > 0"></loading-more>
    <empty-data :show="historyList.allLoaded && historyList.data.length <= 0"></empty-data>
    <back-nav></back-nav>
    <footer-tab></footer-tab>
    <!--<datetime-picker-->
      <!--ref="datePicker"-->
      <!--v-model="currentDate"-->
      <!--type="date"-->
      <!--year-format="{value} 年"-->
      <!--month-format="{value} 月"-->
      <!--date-format="{value}日"-->
      <!--@confirm="handleDateChange">-->
    <!--</datetime-picker>-->
  </div>
</template>

<script>
  import {mapModules, mapRules} from 'vuet'

  export default {
    mixins: [
      mapModules({memberInfo: 'memberInfo'}),
      mapRules({need: 'memberInfo'})
    ],
    data() {
      return {
        historyList: {requested: false, loading: false, allLoaded: false, page: 1, pageSize: 10, data: []}
      }
    },
    created() {
      this.initBalanceHistory()
    },
    components: {},
    methods: {
      initBalanceHistory() {
        this.historyList = {requested: false, loading: false, allLoaded: false, page: 1, pageSize: 10, data: []}
        this.getIntegralHistory(this.historyList.page, this.historyList.pageSize)
      },
      getIntegralHistory(page, pageSize) {
        this.historyList.loading = true
        this.$request.memberEarningsTotal(page, pageSize).then(data => {
          if (data.length < this.historyList.pageSize) {
            this.historyList.allLoaded = true
          }
          this.historyList.data = [...this.historyList.data, ...data]
        }).finally(() => {
          this.historyList.requested = true
          this.historyList.loading = false
        })
      },
      loadMore() {
        if (this.historyList.loading || this.historyList.allLoaded) { // 正在加载 或 已取得全部数据
          return
        }
        setTimeout(() => {
          this.getIntegralHistory(++this.historyList.page, this.historyList.pageSize)
        }, 500)
      }
    }
  }
</script>

<style>

</style>
